<template>
  <!-- 富文本框 -->
  <div class="Editor">
    <div ref="editor"
         class="editor"></div>
  </div>
</template>

<script>
// https://www.kancloud.cn/wangfupeng/wangeditor3 使用手册
import E from 'wangeditor'
export default {
  name: 'editor',
  data () {
    return {
      editor: null,
      editorContent: ''
    }
  },
  mounted () {
    this.editor = new E(this.$refs.editor)
    // 自定义菜单配置
    this.editor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'image', // 插入图片
      'undo', // 撤销
      'redo' // 重复
    ]
    // 配置图片上传
    this.editor.customConfig.customUploadImg = (files, insert) => {
      let postData = new FormData()
      postData.append('file', files[0], files[0].name || '文件')

      const config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }

      this.$axios.post('/api/upload/files', postData, config)
        .then(res => {
          if (res.data.meta.success) {
            let resData = res.data.data
            const imgs = resData.map(item => this.$store.state.user.serverUrl + item)
            // 上传代码返回结果之后，将图片插入到编辑器中
            insert(imgs)
          }
        })
    }
    // 隐藏“网络图片”tab
    this.editor.customConfig.showLinkImg = false
    this.editor.create()
  }
}
</script>
<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
.Editor {
  min-height: 320px;
  .editor {
    text-align: left;
    min-height: 320px;
    /deep/ a {
      color: #317eb0; // a链接样式
    }
    /deep/ ol li {
      list-style-type: decimal; // 有序
    }
    /deep/ ul li {
      list-style-type: disc; // 无序
    }
  }
}
</style>
